<template>
	<view>
		<view class="" v-for="(item, index) in detail.childList" :key="index">
			<view class="item" style="padding-bottom: 0">
				<text class="title">
					{{ item.approveName }}
				</text>

				<u-line color="#efefef" :customStyle="{ display: 'block' }"></u-line>

				<u-grid col="3">
					<u-grid-item
						v-for="(listItem, listIndex) in item.childList"
						:key="listIndex"
						:customStyle="{
							'border-bottom': '1rpx solid #efefef',
							'border-right': '1rpx solid #efefef',
						}"
						@click="itemClick(listItem)">
						<view style="position: relative">
							<image
								class="grid-img"
								:src="listItem.approveImage | mmvImageUrl"
								mode="scaleToFill"></image>

							<text class="grid-count" v-if="listItem.approveCount > 0">
								{{ listItem.approveCount }}
							</text>
						</view>

						<text class="grid-text">{{ listItem.approveName }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bigType: 0,
				detail: {},
			};
		},
		methods: {
			itemClick(listItem) {
				console.log('选中了', listItem.approveName);

				uni.navigateTo({
					url:
						'/pagesB/approval/approval-list?bigType=' +
						this.bigType +
						'&parentType=' +
						listItem.parentType +
						'&applyType=' +
						listItem.bizType,
				});
			},
		},
		onLoad(op) {
			this.bigType = op.bigType;
		},
		onShow() {
			switch (this.bigType) {
				case '1':
					this.$u.api.pendingMyApproveCount().then(res => {
						console.log(res);

						this.detail = res;
						uni.setNavigationBarTitle({
							title:
								'待我审批' +
								(this.detail.approveCount > 0
									? `(${this.detail.approveCount})`
									: ''),
						});
					});
					break;
				case '2':
					this.$u.api.myCopyCount().then(res => {
						this.detail = res;
						uni.setNavigationBarTitle({
							title:
								'抄送我的' +
								(this.detail.approveCount > 0
									? `(${this.detail.approveCount})`
									: ''),
						});
					});
					break;
				case '3':
					this.$u.api.myApplyCount().then(res => {
						this.detail = res;
						uni.setNavigationBarTitle({
							title:
								'我发起的' +
								(this.detail.approveCount > 0
									? `(${this.detail.approveCount})`
									: ''),
						});
					});
					break;
			}
		},
	};
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: $black33;
		margin-left: 20rpx;
	}

	.grid-text {
		font-size: 22rpx;
		color: #333;
		margin: 10rpx 0 20rpx;
	}

	.grid-img {
		margin-top: 20rpx;
		width: 72rpx;
		height: 72rpx;
		border-radius: 8rpx;
		// margin: 20rpx 0;
	}

	.grid-count {
		position: absolute;
		color: #fff;
		border-radius: 50rpx 50rpx 50rpx 0;
		padding: 2rpx 12rpx;
		font-size: 22rpx;
		top: 10rpx;
		right: -15rpx;
		background-color: #ff623d;
	}
</style>
